<template>
  <div class="searchTitle">
    <div class="title">
      <div class="back">
        <p>
          <slot name="quoteTitle"></slot>
        </p>
      </div>
      <div class="search">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input"
          @change="getSearch()"
        ></el-input>
      </div>
      <div class="searchButton">
        <p @click="getSearch()">搜索</p>
      </div>
      <div class="searchButton">
        <p @click="cancel()">取消</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ReqSearch } from "../../request/index";
export default {
  data() {
    return {
      input: ""
    };
  },
  props: ["type"],
  methods: {
    async getSearch() {
      let data = {
        limit: 4,
        page: 1,
        type: this.type,
        search: this.input
      };
      let resSearch = await ReqSearch(data);
      // console.log(resSearch);
      this.$emit('searchArticle',resSearch.page.list)
    },
    cancel(){
      this.input = ''
    }
  }
};
</script>

<style>
.searchTitle .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.searchTitle .back {
  width: 457px;
  height: 50px;
  background-color: rgb(1, 140, 191);
  text-align: center;
  line-height: 20px;
}
.searchTitle .back p {
  text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
  font-size: 14px;
}
.searchTitle .back p span {
  font-family: PingFangSC;
  font-weight: 400;
  font-size: 20px;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  line-height: 50px;
  text-align: center;
}
.searchTitle .el-input__inner {
  height: 50px !important;
  width: 500px;
}
.searchTitle .title .searchButton {
  width: 120px;
  height: 50px;
  background-color: rgb(27, 147, 196);
  border-color: rgb(187, 187, 187);
  border-style: solid;
  border-radius: 10px;
}
.searchTitle .title .searchButton p {
  padding: 0px;
  text-align: center;
  line-height: 50px;
  font-size: 17px;
  font-weight: 400;
  color: rgb(255, 255, 255);
}
@media screen and (max-width: 1370px) {
  .searchTitle .back {
    width: 350px;
  }
  .searchTitle .back p span {
    font-size: 17px;
  }
  .searchTitle .title .searchButton {
    width: 110px;
  }
}
@media screen and (max-width: 1230px) {
  .searchTitle .back {
    width: 350px;
  }
  .searchTitle .el-input__inner {
    width: 350px;
  }
}
@media screen and (max-width: 1075px) {
  .searchTitle .back {
    width: 300px;
  }
  .searchTitle .title .searchButton {
    width: 90px;
  }
}
@media screen and (max-width: 958px) {
  .searchTitle .search {
    display: none;
  }
  .searchTitle .title .searchButton {
    display: none;
  }
  .searchTitle .back {
    width: 450px;
  }
  .searchTitle .back p span {
    font-size: 20px;
  }
}
@media screen and (max-width: 690px) {
  .searchTitle .back {
    width: 350px;
  }
  .searchTitle .back p span {
    font-size: 18px;
  }
}
@media screen and (max-width: 560px) {
  .searchTitle .back {
    width: 250px;
  }
  .searchTitle .back p span {
    font-size: 15px;
  }
}
</style>